<template>
    <nav>
        <div class="head-box">
            <!--前半部分-->
            <div class="z">
                <a>
                    <img src="https://s6.ui.cn/img/yearlogo.png" alt="Logo" style="height: 90px;width: 100px;">
                </a>
                <ul class="nav-hd">
                    <li><button @click="goToHomeView">首页</button></li>
                    <li><button @click="goToHome">新闻</button></li>
                    <li><button @click="goToHome">剧本征集</button></li>
                    <li><button @click="goToHome">故事新编</button></li>
                    
                </ul>
            </div>
            <!--中间搜索框-->
            <div class="search-box">
                <input type="text" v-model="searchQuery" placeholder="输入搜索内容...">
                <button class="search" @click="handleSearch">搜索</button>
            </div>
            <!--后半部分-->
            <div class="behind-box">
                <button class="y">消息</button>
                <button v-if="token != ''" @click="goOut">退出</button>
                
                 <button v-if="token == ''" @click="goToLogin">登录</button>
                 <button v-if="token == ''" @click="goToRegister">注册</button>
                <img v-if="token != ''" src="../img/avatar.png" @click="goToUserView" style="width: 60px;height: 60px;margin-left: 25px;
                margin-top: 18px;">
            </div>
        </div>
    </nav>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useTokenStore } from '../stores/token'
// 创建 Token 状态管理 Store
const userStore = useTokenStore()
// 获取登录的 Token
const token = ref(userStore.getToken())
console.log("头部获取的token:"+token.value)
// 使用ref来创建一个响应式的搜索查询字符串  
const searchQuery = ref('');

const router = useRouter();
const goToLogin = () => {
    //router.push({ name: 'User' }); // 使用路由名称
    router.push('/login')
} 
const goToUserView = () => {
    //router.push({ name: 'User' }); // 使用路由名称
    router.push('/user')
}
const goOut = () => {
    console.log('退出');
    //router.push({ name: 'User' }); // 使用路由名称
    router.push('/out');
    console.log('退出完毕');
}
const goToRegister = () => {
    //router.push({ name: 'User' }); // 使用路由名称
    router.push('/register')
}
// 定义一个处理搜索的方法  
function handleSearch() {
    // 这里我们只是简单地在控制台中打印出搜索内容  
    console.log('搜索内容：', searchQuery.value);
}

</script>
<style scoped>
.head-box {
    width: 100%;
    height: 100px;
    position: relative;
    /* padding: 10px 0; */
    /* 在导航栏内部上下添加一些内边距 */
    /* background-color: #f7c7c7; */
    border-top: 1px solid rgb(191, 190, 190);
    /* 上边框 */
    border-bottom: 1px solid rgb(208, 206, 206);
    /* 下边框 */
    box-sizing: border-box;
    /* 包括padding和border在内计算元素的总宽度 */

}

.z {
    width: 750px;
    height: 100px;
    position: relative;
    display: flex;
    margin-left: 30px;

}

.nav-hd {
    width: 616px;
    height: 100px;
    /* background-color: red; */
    position: absolute;
    float: right;
    margin-left: 100px;
    margin-top: 0px;
    list-style: none;
    display: flex;
    gap: 50px;
    /* 列表项之间的间隔 */
}

.nav-hd li button {
    height: 100px;
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0px 20px;
    font-size: 20px;
}

.nav-hd li button:hover {
    /* 鼠标悬停时的样式 */
    background-color: #f9f7f7;
    /* 淡灰色背景 */
    border-bottom: 10px solid rgb(149, 198, 238);
    /* 底部边框为蓝色 */
    /* 注意：如果你想要边框只在鼠标悬停时出现，你可能需要在.hover-button中设置border为none或透明 */
}

input {
    width: 450px;
    height: 25px;
    padding: 10px;
    margin-right: 10px;
    margin-top: 10px;
    border: 2px solid #a1dcf6;
    border-radius: 4px;
    list-style: none;
    /* display: flex; */
    gap: 20px;
    /* 列表项之间的间隔 */
}

.search {
    width: 70px;
    height: 40px;
    padding: 10px 10px;
    margin-top: 13px;
    background-color: #89bcee;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.search:hover {
    background-color: #a4d6e8;
}

.search-box {
    width: 450px;
    /* background-color: green; */
    position: absolute;
    /* float: right; */
    display: flex;
    margin-top: -80px;
    margin-left: 750px;
}

.behind-box {
    width: 267px;
    height: 100px;
    /* background-color: green; */
    margin-left: 1260px;
    margin-top: -100px;
}

.y {
    width: 70px;
    height: 100px;
    margin-left: 10px;
    margin-top: 0px;
    float: left;
    background-color: transparent;
    border: none;
    padding: 0px 10px;
    font-size: 18px;
}

.y:hover {
    color: #89bcee;
}
</style>